<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>监控</title>
    <link rel="stylesheet" href="{% static "css/semantic.min.css" %}"></link>
    <link rel="stylesheet" href="{% static "css/icon.min.css" %}"></link>
</head>
<body>
<h2 class="ui header inverted big" style="color:#FFF;background-color:#00b5ad;padding:1em;margin:0;">
    MongooCrawler分布式爬虫系统</h2>
<div class="ui bottom attached segment pushable">
    <div class="ui large secondary vertical pointing menu left sidebar uncover visible">
        <a href="#" class="item active text">
            <i class="ui icon home"></i>
            首页
        </a>
        <a href="/clients" class="item">
            客户端
        </a>
        <a href="/business" class="item">
            业务
        </a>
    </div>
    <div class="pusher">
        <div class="ui large breadcrumb" style="margin-left:2em;margin-top:1em;">
            <a class="section">主页</a>
        </div>
        <div class="ui divider"></div>
        <div class="ui three column divided grid">
            <div class="row">
                <div class="column"></div>
                <div class="column"></div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div id="configs" class="ui basic segment center aligned">
            <table class="ui table borderless" border="0" style="border:none;width:50%; margin-top: 2em;">
                <tbody>
                <tr>
                    <td class="celled center aligned">运行模式</td>
                    <td class="center aligned"><a class="ui grey label" id="mode"></a></td>
                </tr>
                <tr>
                    <td class="center aligned">爬虫数量</td>
                    <td class="center aligned"><a class="ui grey label" id="crawler_num"></a></td>
                </tr>
                <tr>
                    <td class="celled center aligned">运行状态</td>
                    <td class="center aligned"><a class="ui green label" id="run_status"></a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="{% static 'js/semantic.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
       //加载爬虫的运行状态
       $.ajax({
            url: "/server/config",
            type:"GET",
            dataType: "json",
            cache:false,
            success: function (data) {
                if(data){
                    $("#configs #mode").html(data.mode);
                    $("#configs #crawler_num").html(data.crawler_number);
                    $("#configs #run_status").html(data.run_status);
                }
            },
            error: function(){
                alert("请求错误");
            }
       });
    });


</script>
</body>
</html>